<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px" class="form" >
		  	<el-form-item label="昵称">
			    <el-input v-model="form.nickname"></el-input>
			</el-form-item>
			<el-form-item label="真实姓名">
			    <el-input v-model="form.realname"></el-input>
			</el-form-item>
		  	<el-form-item label="性别" class="radioGroup">
			    <el-radio-group v-model="form.general" >
			      <el-radio label="0" >男</el-radio>
			      <el-radio label="1" >女</el-radio>
			    </el-radio-group>
			</el-form-item>
	        <el-form-item label="年龄">
			    <el-input  v-model="form.age" type="text"></el-input>
			</el-form-item>
	        <el-form-item label="月薪">
			    <el-input v-model="form.salary"></el-input>
			</el-form-item>
	    	<el-button type="primary" size="large" @click="createAccount">创建帐号
	    	</el-button>
		</el-form>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  size="tiny"
		>
		  <span>创建成功！</span>
		  <span slot="footer" class="dialog-footer">
		  	<router-link :to="{name:'login'}" replace>
		    	<el-button type="primary">去登陆</el-button>
		    </router-link>	    
		  </span>
	    </el-dialog>
    </div>
</template>
<script type="text/javascript">
export default {
	data () {
	    return {
	      dialogVisible: false,
	      form: {
	      	nickname: '',
	      	general: '0',
	      	age: '',
	      	salary: '',
	      	realname: ''
	      }
	    }
	},
	methods: {
		createAccount() {
			var info = Object.assign(this.form,this.$route.params.accountInfo);
			this.$http({
			  method: 'post',
			  url: '/log/register',
			  data: info
			}).then((response)=>{
				const { data } = response;
				if(data.status === 'SUCCESS') {
					this.dialogVisible = true;
				}else {
					this.$message({
			        	message: data.message
			    	});
				}
			})
			.catch(function (error) {
			   this.$message({
			        message:error
			    });
			});
			
		},
		goIndex() {
			this.dialogVisible = false;
			this.$router.push({
				name: 'home'
			});

		},
		verify() {
			this.dialogVisible = false;
			this.$router.push({
				name: 'verify'
			});
		}
	}
}
</script>
<style scoped>
	.form {
		width: 550px;
		margin: 100px auto 50px auto;
		z-index: 2;
		text-align: center;
	}
    .radioGroup {
		text-align: left;
	}
</style>